window.onload = () => {
   var username = document.querySelector('#username');
   var password = document.querySelector('#password');
   var loginBtn = document.querySelector('#loginBtn');
   var loginFalse = document.querySelector('.false');

   //1.本地存储只能存字符串的格式，所以需要转换数组对象为字符串JSON.stringify()
   var user = [{
      username: 'aaa',
      password: 111
   }, {
      username: 'bbb',
      password: 222
   }];
   localStorage.setItem("user", JSON.stringify(user));
   //2.获取本地存储的数据，需要把里面的字符串数据转换为对象格式
   var data = localStorage.getItem("user");
   data = JSON.parse(data);


   loginBtn.onclick = () => {
      // 要比较的用户名和密码
      var targetUsername = username.value;
      var targetPassword = password.value;
      // console.log(targetUsername);
      // console.log(targetPassword);
      // console.log(typeof (targetUsername));

      // 遍历数组
      for (var i = 0; i < data.length; i++) {
         // 检查用户名和密码是否匹配 ==只比较值，但两个都为String的情况下用===仍不相等
         if (data[i].username == targetUsername && data[i].password == targetPassword) {
            // 匹配,切换页面
            window.location.href = "todo.html";

         }
      }
      //循环结束后仍然没有找到匹配项
      //两个输入框摇晃并清除内容
      // 给输入框添加 class，触发动画
      username.classList.add('shake');
      password.classList.add('shake');

      // 在一段时间后移除 class，以便动画可以再次触发
      setTimeout(function () {
         username.classList.remove('shake');
         password.classList.remove('shake');
      }, 1000); // 这里的时间可以根据你想要的效果进行调整

      username.value = '';
      password.value = '';
      //显示输入错的文字
      loginFalse.style.display = 'block';
   }
   //点击任何输入框，文字消失
   username.onclick = () => {
      loginFalse.style.display = 'none';
   }
   password.onclick = () => {
      loginFalse.style.display = 'none';
   }
}




